<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <Header></Header>
      <!-- 排序 -->
      <div class="sort">
        <div :class="{ active: selSort == 1 }" @click="sort(1)">综合排序</div>
        <div :class="{ active: selSort == 2 }" @click="sort(2)">销量最高</div>
        <div :class="{ active: selSort == 3 }" @click="sort(3)">距离最近</div>
        <div :class="{ active: selSort == 4 }" @click="sort(4)">筛选</div>
      </div>
    </div>

    <!-- 滑动导航 -->
    <div class="scollnav">
      <span>
        <ScollNav :nav="scollnav" />
      </span>
    </div>
    <!-- 商品列表展示区 -->
    <div>
      <GoodsListCard :goods="goodslist" />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
import ScollNav from "../components/ScollNav";
import GoodsListCard from "../components/GoodsListCard";
export default {
  data() {
    return {
      selSort: 1,
    };
  },
  components: {
    Header,
    ScollNav,
    GoodsListCard,
  },
  mounted() {
    this.$store.dispatch("getScollNav");
    this.$store.dispatch("getGoodsList");
  },
  computed: {
    scollnav: function () {
      return this.$store.state.scollnav;
    },
    goodslist: function () {
      return this.$store.state.goodslist;
    },
  },
  methods: {
    sort(id) {
      //排序
      this.selSort = id;
      switch (id) {
        case 1: //综合
          this.goodslist.sort((a, b) => {
            return b.deliveryTimeTip - a.deliveryTimeTip; //按照原价值排序
          });
          break;
        case 2: //月销
          this.goodslist.sort((a, b) => {
            return b.monthSalesTip - a.monthSalesTip; //按照月销排序
          });
          break;
        case 3: //距离
          this.goodslist.sort((a, b) => {
            return a.distance - b.distance; //按照距离排序
          });
          break;
        case 4: //筛选
          break;
      }
    },
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
/* 排序 */
.sort {
  height: 40px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.scollnav {
  margin-top: 95px;
  width: 100%;
}
</style>